<script setup lang="ts">

import img from "@/assets/img";
import {AiOutlineLeft,AiFillPlusCircle,AiFillMinusCircle,AiOutlineShoppingCart} from "vue-icons-plus/ai";

interface FoodItem {
  id: number;
  name: string;
  price: number;
  count: number;
}
const foodItems = ref<FoodItem[]>([
  { id: 1, name: '纯肉鲜肉（水饺）', price: 14, count: 1 },
  { id: 2, name: '玉米鲜肉（水饺）', price: 12, count: 0 },
  { id: 3, name: '虾仁三鲜（蒸饺）', price: 17, count: 0 },
  { id: 4, name: '素三鲜（蒸饺）', price: 10, count: 0 },
  { id: 5, name: '角瓜鸡蛋', price: 12, count: 0 },
  { id: 6, name: '小白菜肉（水饺）', price: 13, count: 0 },
  { id: 7, name: '芹菜牛肉（水饺）', price: 18, count: 0 },
  { id: 8, name: '虾腰鲜肉（蒸饺）', price: 20, count: 0 },
  { id: 9, name: '青椒鲜肉（蒸饺）', price: 12, count: 0 },
]);

const totalPrice = ref(0);
const show = ref(false);
const notshow = ref(true);

const updateTotalPrice = () => {
  totalPrice.value = foodItems.value.reduce((total, item) => total + item.price * item.count, 0);
  if (totalPrice.value >= 15) {
    show.value = true;
    notshow.value = false;
  } else {
    show.value = false;
    notshow.value = true;
  }
};
const increaseCount = (item: FoodItem) => {
  item.count++;
  updateTotalPrice();
  saveState();
};

const decreaseCount = (item: FoodItem) => {
  if (item.count > 0) {
    item.count--;
    updateTotalPrice();
    saveState();
  }
};

const saveState = () => {
  const itemCount = foodItems.value.filter(item => item.count > 0).length;
  sessionStorage.setItem('foodItems', JSON.stringify(foodItems.value));
  sessionStorage.setItem('totalPrice', totalPrice.value.toString());
  sessionStorage.setItem('itemCount', itemCount.toString());
};

// 从 sessionStorage 中恢复状态信息
const restoreState = () => {
  const savedFoodItems = sessionStorage.getItem('foodItems');
  const savedTotalPrice = sessionStorage.getItem('totalPrice');

  if (savedFoodItems) {
    foodItems.value = JSON.parse(savedFoodItems);
  }

  if (savedTotalPrice) {
    totalPrice.value = parseFloat(savedTotalPrice);
  }

  updateTotalPrice(); // 确保在恢复状态后更新总价和按钮显示
};

// 页面加载时恢复状态
onMounted(() => {
  restoreState();
  updateTotalPrice();
});

const saveOrderToSessionStorage = () => {
  const orderData = {
    items: foodItems.value.filter(item => item.count > 0),
    totalPrice: totalPrice.value + 3, // 加上配送费
  };
sessionStorage.setItem('orderData', JSON.stringify(orderData));
};
const router = useRouter()
function order() {
  saveOrderToSessionStorage();
  router.push({ name: 'orders' });
}
function goback(){
  router.push({ name: 'businesslistings' });
}
</script>

<template>
  <div class="w-full h-full select-none">
    <header class="w-full h-12vw bg-#0097ff color-#fff text-4.8vw flex items-center pos-fixed left-0 top-0 z-100">
      <AiOutlineLeft @click="goback" class="cursor-pointer"></AiOutlineLeft>
      <p class="flex-grow text-center mr-4">商家信息</p>
    </header>
    <div class="w-full h-35vw mt-12vw flex justify-center items-center">
      <img :src="img.sj01" class="w-40vw h-30vw rounded-5px">
    </div>
    <div class="iw-full h-20vw flex flex-col justify-center items-center">
      <h1 class="text-5vw">万家饺子(软件园E18店)</h1>
      <p>&#165;15起送 &#165;3配送</p>
      <p class="text-3vw color-#666 mt-1vw">各种饺子</p>
    </div>
    <ul class=" w-full pb-14vw">
      <li v-for="item in foodItems" :key="item.id" class="w-full box-border p-2.5vw select-none flex justify-between items-center">
        <div class=" flex items-center">
          <img :src="img[`sp${item.id}`as keyof typeof img]" class="w-20vw h-20vw">
          <div class=" ml-3vw">
            <h3 class="text-3.8vw color-#555">{{ item.name }}</h3>
            <p class="text-3vw color-#888 mt-2vw">新鲜猪肉</p>
            <p class="text-3vw color-#888 mt-2vw">&#165;{{ item.price }}</p>
          </div>
        </div>
        <div class=" w-16vw flex justify-between">
          <AiFillMinusCircle @click="decreaseCount(item)" class=" w-5.5 h-5.5 color-#999 cursor-pointer"></AiFillMinusCircle>
          <p class=" text-3.2vw color-#333">
            <span>{{ item.count }}</span>
          </p>
          <AiFillPlusCircle @click="increaseCount(item)" class="w-5.5 h-5.5 color-#0097ef cursor-pointer"></AiFillPlusCircle>
        </div>
      </li>
    </ul>
    <div class="w-full h-14vw pos-fixed left-0 bottom-0 flex">
      <div class="cart-left bg-#505051 flex" style="flex: 2">
        <div class="w-16vw h-16vw box-border rounded-8vw border-solid border-1.6vw border-#444 bg-#3190E8 text-7vw color-#fff flex justify-center items-center pos-relative mt--4vw ml-3vw">
          <AiOutlineShoppingCart class="w-8vw h-8vw"></AiOutlineShoppingCart>
          <div class="w-5vw h-5vw rounded-2.5vw bg-[#ff0000ff] text-3.6vw pos-absolute flex justify-center items-center right--1.5vw top--1.5vw">{{ foodItems.filter(item => item.count > 0).length }}</div>
        </div>
        <div class="ml-2">
          <p class="text-4.5vw color-#fff mt-1vw">&#165;{{ totalPrice }}</p>
          <p class="text-3vw color-#AAA">另需配送费3元</p>
        </div>
      </div>
      <div class="flex-1">
        <div v-if="notshow" class="w-full h-full bg-#535356 color-#fff text-4.5vw font-700 select-none cursor-pointer flex justify-center items-center">&#165;15起送</div>
        <div v-if="show" @click="order" class="w-full h-full bg-#38CA73 color-#fff text-4.5vw font-700 select-none cursor-pointer flex justify-center items-center" >去结算</div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>